<template>
    <div class="msgbox-container" :class="{ gray:message.cancelBol }">
        <div class="msgbox-wraper" :class="{ transparent:message.cancelBol }">
            <div class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
            <div class="content-container">{{message.msg}}</div>
            <p v-if="message.cancelBol" id="cancel" @click="cancelBuy()">取消抢购</p>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['message'],
        methods:{
            cancelBuy(){
                this.$parent.stopBuy(1);
            }
        }
    }
</script>

<style scoped lang="scss">
    .msgbox-container{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999999;
        display: block;
        background-color: transparent;
        transform:translate(0%,0%) scale(1, 1);
    }
    .gray{
        background-color: rgba(0,0,0,0.7);
    }
    .msgbox-wraper{
        width: 500px;
        margin-left: 125px;
        margin-top: 400px;
        padding: 50px 30px;
        background-color: rgba(0,0,0,0.7);
        overflow: hidden;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .transparent{
        background-color: transparent;
    }

    .spinner {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        position: relative;
    }

    .container1 > div, .container2 > div, .container3 > div {
        width: 30px;
        height: 30px;
        background-color: #ff4102;
        border-radius: 100%;
        position: absolute;
        -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
        animation: bouncedelay 1.2s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .spinner .spinner-container {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .container2 {
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
    }

    .container3 {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }

    .circle1 { top: 0; left: 0; }
    .circle2 { top: 0; right: 0; }
    .circle3 { right: 0; bottom: 0; }
    .circle4 { left: 0; bottom: 0; }

    .container2 .circle1 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .container3 .circle1 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .container1 .circle2 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .container2 .circle2 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    .container3 .circle2 {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }

    .container1 .circle3 {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }

    .container2 .circle3 {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }

    .container3 .circle3 {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }

    .container1 .circle4 {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }

    .container2 .circle4 {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }

    .container3 .circle4 {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }

    @-webkit-keyframes bouncedelay {
        0%, 80%, 100% { -webkit-transform: scale(0.0) }
        40% { -webkit-transform: scale(1.0) }
    }

    @keyframes bouncedelay {
        0%, 80%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        } 40% {
              transform: scale(1.0);
              -webkit-transform: scale(1.0);
          }
    }
    .msgbox-enter,.msgbox-leave-to{
        -webkit-transform:  translate(0%,0%) scale(0,0);
    }
    .msgbox-enter-active,.msgbox-leave-active{
        -webkit-transition: all 0.0005s;
        transition: all 0.0005s;
    }
    .msgbox-enter-to,.msgbox-leave{
        -webkit-transform:  translate(0%,0%) scale(1,1);
    }
    .content-container{
        width: 100%;
        margin-top: 30px;
        text-align: center;
        color: #fff;
        font-size: 30px;
    }
    #cancel{
        text-align: center;
        width: 200px;
        margin: 0 auto;
        margin-top: 50px;
        color: #fff;
        background-color: #ff4102;
        font-size: 30px;
        height: 60px;
        line-height: 64px;
        border-radius: 6px;
        overflow: hidden;
    }
</style>